```tsx {16-18}
const ColorPicker = () => {
  const service = useMachine(colorPicker.machine, {
    id: useId(),
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = colorPicker.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      {/* ... */}
      <div {...api.getPositionerProps()}>
        <div {...api.getContentProps()}>
          <button {...api.getEyeDropperTriggerProps()}>
            <EyeDropIcon />
          </button>
        </div>
      </div>
    </div>
  )
}
```
